<template>
	<view class="layout">
		<uni-header :leftIcon="true" :title="'活动报告'"></uni-header>
		<view class="content report">
			<view class="report-card">
				<view class="card-title">课程信息</view>
				<view class="card-body">
					<view class="info-list">
						<view class="name">课程名称</view>
						<view class="text">{{activity.activity_name}}</view>
					</view>
					<view class="info-list">
						<view class="name">地点</view>
						<view class="text">{{activity.activity_add}}</view>
					</view>
					<view class="info-list">
						<view class="name">授课老师</view>
						<view class="text">{{activity.teacher_name}}</view>
					</view>
					<view class="info-list">
						<view class="name">学段</view>
						<view class="text">{{activity.stagesName}}</view>
					</view>
					<view class="info-list">
						<view class="name">年级</view>
						<view class="text">{{activity.activity_grade}}</view>
					</view>
					<view class="info-list">
						<view class="name">学科</view>
						<view class="text">{{activity.subject_name}}</view>
					</view>
				</view>
			</view>
			<view class="report-card">
				<view class="card-title">授课人评价</view>
				<view class="card-body">
					<pie :pieData="pieData1"></pie>
					<table>
						<tr>
							<td>授课人评价</td>
							<td>数量</td>
							<td>占比</td>
						</tr>
						<tr>
							<td>优</td>
							<td>{{reportData.levelNum_1}}</td>
							<td>{{reportData.levelPercent_1}}</td>
						</tr>
						<tr>
							<td>良</td>
							<td>{{reportData.levelNum_2}}</td>
							<td>{{reportData.levelPercent_2}}</td>
						</tr>
						<tr>
							<td>中</td>
							<td>{{reportData.levelNum_3}}</td>
							<td>{{reportData.levelPercent_3}}</td>
						</tr>
						<tr>
							<td>差</td>
							<td>{{reportData.levelNum_4}}</td>
							<td>{{reportData.levelPercent_4}}</td>
						</tr>
					</table>
				</view>
			</view>
			<view class="report-card">
				<view class="card-title">活动满意度</view>
				<view class="card-body">
					<pie :pieData="pieData2"></pie>
					<table>
						<tr>
							<td>活动满意度</td>
							<td>数量</td>
							<td>占比</td>
						</tr>
						<tr>
							<td>非常满意</td>
							<td>{{reportData.satisfactionNum_1}}</td>
							<td>{{reportData.satisfactionPercent_1}}</td>
						</tr>
						<tr>
							<td>满意</td>
							<td>{{reportData.satisfactionNum_2}}</td>
							<td>{{reportData.satisfactionPercent_1}}</td>
						</tr>
						<tr>
							<td>一般满意</td>
							<td>{{reportData.satisfactionNum_3}}</td>
							<td>{{reportData.satisfactionPercent_1}}</td>
						</tr>
						<tr>
							<td>不满意</td>
							<td>{{reportData.satisfactionNum_4}}</td>
							<td>{{reportData.satisfactionPercent_1}}</td>
						</tr>
					</table>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import pie from "@/pages/common/echars/pie"
	import {
		getClassActivityReport,
		getEmulateActivityReport
	} from "@/api/home"
	export default {
		data() {
			return {
				activeId: "",
				type: "",
				deviceId: this.$store.state.user.deviceId,
				reportData: {},
				pieData1: [],
				pieData2: [],
				activity: {},
			}
		},
		onLoad(option) {
			this.activeId = option.id;
			this.type = option.type;
			console.log(option)
			if (this.type === "class") {
				this.getClassActivityReportData();
			} else if (this.type === "emulate") {
				this.getEmulateActivityReportData();
			}
		},
		components: {
			pie
		},
		methods: {
			//获取听评课下活动报告数据
			getClassActivityReportData() {
				getClassActivityReport({
					activityId: this.activeId,
					deviceId: this.deviceId
				}).then(res => {
					console.log(res)
					if (res.list.length === 0) {
						this.$modal.showToast('暂时没有相关数据');
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						}, 1500);
					} else {
						this.reportData = res;
						this.activity = res.list[0];
						this.pieData1 = [{
								value: res.levelNum_1,
								name: '优'
							},
							{
								value: res.levelNum_2,
								name: '良'
							},
							{
								value: res.levelNum_3,
								name: '中'
							},
							{
								value: res.levelNum_4,
								name: '差'
							}
						];
						this.pieData2 = [{
								value: res.satisfactionNum_1,
								name: '非常满意'
							},
							{
								value: res.satisfactionNum_2,
								name: '满意'
							},
							{
								value: res.satisfactionNum_3,
								name: '一般满意'
							},
							{
								value: res.satisfactionNum_4,
								name: '不满意'
							}
						]
					}
				})
			},
			getEmulateActivityReportData() {
				getEmulateActivityReport({
					activityId: this.activeId,
					deviceId: this.deviceId
				}).then(res => {
					if (res.list.length === 0) {
						this.$modal.showToast('暂时没有相关数据');
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						}, 1500);
					} else {
						this.reportData = res;
						this.activity = res.list[0];
						this.pieData1 = [{
								value: res.levelNum_1,
								name: '优'
							},
							{
								value: res.levelNum_2,
								name: '良'
							},
							{
								value: res.levelNum_3,
								name: '中'
							},
							{
								value: res.levelNum_4,
								name: '差'
							}
						];
						this.pieData2 = [{
								value: res.satisfactionNum_1,
								name: '非常满意'
							},
							{
								value: res.satisfactionNum_2,
								name: '满意'
							},
							{
								value: res.satisfactionNum_3,
								name: '一般满意'
							},
							{
								value: res.satisfactionNum_4,
								name: '不满意'
							}
						]
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #eeeff5;

		.report {
			.report-card {
				.card-title {
					font-size: 18px;
					padding: 10px 15px;
				}

				.card-body {
					background: #fff;
					padding-bottom: 15px;

					.info-list {
						display: flex;
						justify-content: space-between;
						padding: 10px 15px;
						border-bottom: 1px solid #eee;

						.name {
							font-size: 20px;
							color: #3b4144;
						}

						.text {
							font-size: 18px;
							color: #666;
						}
					}

					table {
						width: 95%;
						text-align: center;
						border-collapse: collapse;
						margin: 0 auto;

						td {
							border: 1px solid #eee;
							padding: 10px 0;
						}
					}
				}
			}
		}
	}
</style>
